import { User } from '@entity/user';
import { PrivateMsg } from '@entity/chat'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export class ChatItemView extends Vue {

    /** 我自己 */
    private me: User = this.$store.getters.me();

    /** 发送方 */
    private sender: User;

    /** 群聊模式 */
    @Prop({
        default: false
    })
    private groupChat: boolean;

    /** 用户消息 */
    @Prop({
        default: () => new PrivateMsg()
    })
    private privateMsg: PrivateMsg;

    created() {
        if (this.privateMsg.sender != this.me.id) {
            this.sender = this.$store.getters.user(this.privateMsg.sender);
        }
    }
    
    /**
     * 判断当前消息的发送者是不是自己
     */
    private isMe(): boolean {
        return this.privateMsg.sender == this.me.id;
    }

    /**
     * 设置消息对齐方式
     */
    private getPosition(): any {
        if (this.isMe()) {
            return {
                textAlign: 'right'
            }
        }
    }

    /**
     * 设置消息背景颜色
     */
    private getBackground(): any {
        if (this.isMe()) {
            return {
                background: '#2D8CF0',
                color: 'white'
            }
        }
    }

    /**
     * 设置消息的小三角
     */
    private getTrangle(): any {
        if (this.isMe()) {
            return {
                borderTopColor: '#2D8CF0',
                right: '-12px',
                transform: 'rotateZ(-90deg)',
            }
        } else {
            return {
                left: '-12px',
                transform: 'rotateZ(90deg)',
                borderTopColor: '#F0F0F0'
            }
        }
    }

    /**
     * 设置时间的外边距
     */
    private getMargin(): any {
        if (this.isMe()) {
            return {
                marginRight: '55px'
            }
        }
    }
}